import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Form, Card, Select, List, Input, Button } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import TagSelect from '@/components/TagSelect';
import StandardFormRow from '@/components/StandardFormRow';
import DrawerComponent from './drawer';
import styles from './Projects.less';

const { Option } = Select;
const FormItem = Form.Item;

/* eslint react/no-array-index-key: 0 */

@connect(({ list, loading }) => ({
  list,
  loading: loading.models.list,
}))
@Form.create({
  onValuesChange({ dispatch }, changedValues, allValues) {
    // 表单项变化时请求数据
    // eslint-disable-next-line
    console.log(changedValues, allValues);
    // 模拟查询表单生效
    dispatch({
      type: 'list/fetch',
      payload: {
        count: 8,
      },
    });
  },
})
class CoverCardList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      drawerVisible: false,
    };

  }

  componentDidMount() {
  }

  render() {
    const { loading, form } = this.props;
    const { drawerVisible } = this.state;
    const { getFieldDecorator } = form;
    const list = [
      {
        avatar: 'https://mondora-test.oss-cn-beijing.aliyuncs.com/mdl-buisness/1544171412482.png',
        title: 'xxxxx',
        description: '产品名称',
      },
    ];
    const tradeVisible = (flag,item) => {
      console.log(item);
      this.setState({
        drawerVisible: !!flag,
      });
    };
    const cardList = list ? (
      <List
        rowKey="id"
        loading={loading}
        grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
        dataSource={list}
        renderItem={item => (
          <List.Item key={item.id}>
            <Card hoverable className={styles.card} actions={[<a>标的详情</a>, <a>交易明细</a>]} onClick={() => tradeVisible(true,item)}>
              <Card.Meta
                avatar={<img alt="" className={styles.cardAvatar} src={item.avatar}/>}
                title={<a>{item.title}</a>}
                description={
                  <div>
                    <div>产品名称</div>
                    <div>标的名称</div>
                    <div>标的金额</div>
                    <div>商户名称</div>
                    <div>标的状态</div>
                    <div>标的类型</div>
                    <div>购买数量</div>
                  </div>
                }
              />
            </Card>
          </List.Item>
        )}
      />
    ) : null;

    const formItemLayout = {
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };

    return (
      <PageHeaderWrapper title="交易明细">
        <div className={styles.coverCardList}>
          <Card bordered={false}>
            <Form layout="inline">
              <StandardFormRow title="交易类型" block style={{ paddingBottom: 11 }}>
                <FormItem>
                  {getFieldDecorator('category')(
                    <TagSelect expandable>
                      <TagSelect.Option value="cat1">类目一</TagSelect.Option>
                      <TagSelect.Option value="cat2">类目二</TagSelect.Option>
                      <TagSelect.Option value="cat3">类目三</TagSelect.Option>
                      <TagSelect.Option value="cat4">类目四</TagSelect.Option>
                      <TagSelect.Option value="cat5">类目五</TagSelect.Option>
                      <TagSelect.Option value="cat6">类目六</TagSelect.Option>
                      <TagSelect.Option value="cat7">类目七</TagSelect.Option>
                      <TagSelect.Option value="cat8">类目八</TagSelect.Option>
                      <TagSelect.Option value="cat9">类目九</TagSelect.Option>
                      <TagSelect.Option value="cat10">类目十</TagSelect.Option>
                      <TagSelect.Option value="cat11">类目十一</TagSelect.Option>
                      <TagSelect.Option value="cat12">类目十二</TagSelect.Option>
                    </TagSelect>,
                  )}
                </FormItem>
              </StandardFormRow>
              <StandardFormRow title="其它选项" grid last>
                <Row gutter={16}>
                  <Col lg={4} md={4} sm={10} xs={24}>
                    <FormItem {...formItemLayout} label="企业名称">
                      {getFieldDecorator('author', {})(
                        <Input placeholder='请输入企业名称'/>,
                      )}
                    </FormItem>
                  </Col>
                  <Col lg={4} md={4} sm={10} xs={24}>
                    <FormItem {...formItemLayout} label="产品名称">
                      {getFieldDecorator('author', {})(
                        <Input placeholder='请输入产品名称'/>,
                      )}
                    </FormItem>
                  </Col>
                  <Col lg={4} md={4} sm={10} xs={24}>
                    <FormItem {...formItemLayout} label="标的名称">
                      {getFieldDecorator('author', {})(
                        <Input placeholder='请输入标的名称'/>,
                      )}
                    </FormItem>
                  </Col>
                  <Col lg={4} md={4} sm={10} xs={24}>
                    <FormItem {...formItemLayout} label="标的状态">
                      {getFieldDecorator('rate', {})(
                        <Select placeholder="标的状态" style={{ maxWidth: 200, width: '100%' }}>
                          <Option value="good">优秀</Option>
                          <Option value="normal">普通</Option>
                        </Select>,
                      )}
                    </FormItem>
                  </Col>
                  <Col lg={4} md={4} sm={10} xs={24}>
                    <FormItem {...formItemLayout} label="商户名称">
                      {getFieldDecorator('author', {})(
                        <Input placeholder='请输入商户名称'/>,
                      )}
                    </FormItem>
                  </Col>
                  <Col lg={4} md={4} sm={10} xs={24}>
                    <FormItem {...formItemLayout} label="出借状态">
                      {getFieldDecorator('rate', {})(
                        <Select placeholder="出借状态" style={{ maxWidth: 200, width: '100%' }}>
                          <Option value="good">优秀</Option>
                          <Option value="normal">普通</Option>
                        </Select>,
                      )}
                    </FormItem>
                  </Col>
                </Row>
              </StandardFormRow>
              <div style={{ textAlign: 'center', marginTop: '20px' }}>
                <Button type="danger" style={{ marginRight: '20px' }}>重置</Button>
                <Button type="primary">搜索</Button>
              </div>
            </Form>
          </Card>
          <div className={styles.cardList}>{cardList}</div>
        </div>
        <DrawerComponent visible={drawerVisible} onClose={tradeVisible}/>
      </PageHeaderWrapper>
    );
  }
}

export default CoverCardList;
